<template>
  <div>
    <van-nav-bar title="商品分类统计" left-text="返回" left-arrow v-back />
    <div class="finance-container">
      <finance-date-choose @dateChange="dateChange"></finance-date-choose>
      <div class="finance-content">
        <chart :height="'400px'" :id="'productTypeChart'" :option="option"></chart>
      </div>
    </div>

  </div>
</template>

<script>
  import FinanceDateChoose from '@/components/FinanceDateChoose'
  import Chart from '@/components/Chart'
  import Bar from 'echarts/lib/chart/bar'
  import line from 'echarts/lib/chart/line'
  import {
    mapState
  } from 'vuex';
  import {
    PRODUCT_TYPE_COUNT
  } from '@/api/finance'


  export default {
    components: {
      FinanceDateChoose,
      Chart
    },
    computed: {
      ...mapState(['stationInfo'])
    },
    data() {
      return {
        searchDate: new Date().Format('yyyy'),
        searchDateType: 'year',
        option: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          color: ['#77BBAA', '#4992FF'],
          legend: {
            top: '10px',
            data: ['销售量', '销售额']
          },
          grid: {
            left: '40',
            right: '40',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['水厂商品', '自营商品', '其他商品'],
            splitLine: {
              show: true
            },
            axisLabel: {
              color: "#333333"
            },
          },
          yAxis: [{
            type: 'value',
            name: '销售量（件）',
            nameTextStyle: {
              color: "#999999"
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: "#333333"
              }
            }
          }, {
            type: 'value',
            name: '销售额（元）',
            nameTextStyle: {
              color: "#999999"
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: "#333333"
              }
            }
          }],
          series: [{
              name: '销售量',
              type: 'bar',
              barWidth: '20%',
              label: {
                normal: {
                  show: true,
                }
              },
              data: [],
            },
            {
              name: '销售额',
              type: 'line',
              label: {
                normal: {
                  show: true,
                }
              },
              smooth: true,
              data: [],
              yAxisIndex: 1,
            }
          ]
        }
      }
    },
    mounted(){
      this.getData();
    },
    methods: {
      getData() {
        this.$reqGet(PRODUCT_TYPE_COUNT, {
          stationId: this.stationInfo.id,
          dateType: this.searchDateType,
          date: this.searchDate
        }).then(res => {
          if (res.code == 200) {
            let data = res.data;
            let sell = [data.orderWaterNum, data.productNumA, data.productNumB], 
            price = [data.orderWaterSum, data.productSumA, data.productSumB];

            this.option.series[0].data = sell;    //销售量
            this.option.series[1].data = price;    //销售额
          }
        })
      },
      dateChange(info) {
        this.searchDate = info.date;
        this.searchDateType = info.type;
        this.getData();
      }
    }
  }

</script>

<style>

</style>
